<style scoped lang="less">
	.biographyList-view{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		.search{
			position: absolute;
			top:0;
			left:0;
			z-index: 11;
			height: 1.33rem;
			background-image: linear-gradient(-406deg, #FFAC12 0%, #FD5286 100%);
			padding: 0.27rem 0.32rem;
			div{
				width: 9.36rem;
				height: 0.8rem;
				line-height: 0.8rem;
				background: #FFFFFF;
				border-radius: 0.11rem;
				text-align: center;
				font-size: 0.37rem;
				color:#999;
				img{
					width: 0.37rem;
					height: 0.37rem;
					vertical-align: middle;
					margin-right: 0.16rem;
				}
			}
		}
		.banner{
			// margin-top: 1.33rem;
			height: 4.8rem;
			img{
				max-height: 4.8rem;
			}
		}
		.list{
			width: 100%;
			position: absolute;
			top: 1.33rem;
			bottom: 0;
			background: #fff;
			.divWrap{
				width: 100%;
				height: 100%;
				position: relative;
				.notList{
					padding-top:3.06rem;
					text-align: center;
					img{
						width: 3.73rem;
						height: 3.73rem;
					}
					p{
						margin-top: 0.21rem;
						font-size: 0.37rem;
						color: #666666;
					}
				}
			}
			.title{
				height: 0.8rem;
				line-height: 0.8rem;
				background-image: linear-gradient(-180deg, #FCFCFC 0%, #F7F7F7 100%);
				margin-bottom: 0.32rem;
				color: #333333;
				font-size: 0.32rem;
				font-weight: bold;
				padding-left: 0.53rem;
			}
			.data,.dataS{
				padding: 0 0.88rem 0 0.32rem;
				margin-bottom: 0.27rem;
				.img{
					float: left;
					width: 2.93rem;
					height: 3.89rem;
					margin-right: 0.43rem;
					border-radius: 0.16rem;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					padding: 0.27rem 0 0.4rem 0;
					.name{
						font-size: 0.45rem;
						color: #262626;
						line-height: 0.64rem;
						margin-bottom: 0.27rem;
					}
					.introduce{
						height: 1.07rem;
						line-height: 0.53rem;
						font-size: 0.37rem;
						color: #4F5054;
						overflow: hidden;
						margin-bottom: 0.8rem;
					}
					.number{
						img{
							width: 0.48rem;
							height: 0.48rem;
							vertical-align: top;
							margin-right: 0.21rem;
						}
						font-size: 0.32rem;
						color: #FE9333;
					}
				}
			}
			.data:active,.data:visited{
				display: block;
				background-color: #F7F7F7;				
			}
		}
		.list2{
			top:1.68rem;
		}
		.LetterIndexes{
			position: fixed;
			width: 0.29rem;
			right:0.19rem;
			top:0;
			height: 100%;
			z-index: 12;
			display: flex;
			align-items: center;
			ul{
				width: 100%;				
				li{
					width: 100%;
					font-size: 0.29rem;
					line-height: 0.35rem;
					color: #FF7900;
				}
				.active{
					color:#666;
				}
			}
		}
		.searchPop{
			position: absolute;
			top:0;
			left: 0;
			z-index: 13;
			width: 100%;
			height: 100%;
			background: #fff;
			padding-top: 1.79rem;
			.top{
				position: fixed;
				top:0;
				left:0;
				width: 100%;
				height: 1.33rem;
				background-image: linear-gradient(-426deg, #FFAC12 0%, #FD5286 100%);
				overflow: hidden;
				z-index: 5;
				form{
					position: absolute;
					top:0;
					left: 0;
				}
				.div{
					position: absolute;
					height: 0.8rem;
					top:0.27rem;
					left: 0.32rem;
					width: 8.0rem;
					.divInput{
						width: 8.0rem;
						height: 0.8rem;
						line-height: 0.8rem;
						border-radius: 0.11rem;
						background: #fff;
						font-size: 0.37rem;
						color:#999;
						padding: 0 0.58rem 0 0.75rem;
						border: 0;
					}
					.icon{
						position: absolute;
						top:0.21rem;
						left: 0.21rem;
						width: 0.37rem;
						height: 0.37rem;
						z-index: 1;
					}
					.icon2{
						position: absolute;
						top:0.21rem;
						right: 0.21rem;
						width: 0.37rem;
						height: 0.37rem;
					}
				}
				.cancel{
					position: absolute;
					top:0.43rem;
					right: 0.43rem;
					font-size: 0.43rem;
					color:#fff;
					font-weight: 500;
					line-height: 0.59rem;
				}
			}
			.p1{
				padding-left: 0.32rem;
				font-size: 0.4rem;
				color: #999CA0;
				margin-bottom: 0.4rem;
			}
			.typeList{
				padding-left: 0.32rem;
				li{
					float: left;
					border: 0.03rem solid #FFBD81;
					border-radius: 1.33rem;
					margin-right: 0.24rem;
					margin-bottom: 0.27rem;
					color:#ffbd81;
					font-size: 0.35rem;
					padding: 0.19rem 0.35rem 0.16rem 0.37rem;
				}
			}
			.listSearchDiv{
				height: 100%;
				overflow-y: auto;
				-webkit-overflow-scrolling:touch;
				overflow-scrolling:touch;
			}
		}
		.letterShow{
			position: absolute;
			top:50%;
			left:50%;
			width: 1.33rem;
			height: 2.16rem;
			margin-top: -1.08rem;
			margin-left: -0.7rem;
			color: #FF7900;
			font-size: 1.55rem;
			line-height: 2.16rem;
			text-shadow: 1px 1px 4px rgba(0,0,0,0.12);
			text-align:center;
		}
	}
</style>
<style lang="less">
	.biographyList-view{
		.banner{
			position: relative;
			.bom{
				position: absolute;
				width: 100%;
				bottom:0.27rem;
				height: 0.27rem;
				display: flex;
				justify-content: center;
			}
			.swiper-pagination{
				margin-left:0.43rem;
				.swiper-pagination-bullet{
					width: 0.13rem;
					height: 0.13rem;
					opacity: 0.6;
					border: 1px solid #FFFEFF;
					background:none;
					margin-right:0.43rem;
				}
				.swiper-pagination-bullet-active{
					background: #FE9333;
					opacity: 1;					
					border: none;					
				}
			}
		}
		.searchPop{
			.top{
				.ivu-input{
					width: 8.0rem;
					height: 0.8rem;
					line-height: 0.8rem;
					border-radius: 0.11rem;
					background: #fff;
					font-size: 0.37rem;
					color:#999;
					padding: 0 0.58rem 0 0.75rem;
					border: 0;
				}
			}
		}
	}
</style>

<template>
    <div class="biographyList-view">
        <!-- 顶部搜索框 -->
		<div class="search" v-show="!isSearch && !searchResult">
			<div @click="toSearch"><img src="../../images/phone-list-icon.png" alt=""><span>搜索</span></div>
		</div>
		<!-- 列表内容 -->
		<div class="list" v-show="!isSearch && !searchResult"  >
			<div class="divWrap" ref="listWrapper">
				<div  ref="listRefs">
					<!-- banner -->
					<div class="banner">
						<swiper :options="swiperOption">
							<swiper-slide v-for="(items,index) in publicityShowPicSourceCutList">								
								<img :src="imgurl+items"  bh="1"/>					      
							</swiper-slide>
						</swiper>
						<div class="bom">
							<div class="swiper-pagination"></div>
						</div>
					</div>
					<div v-for="(item,index) in mobileLifeBookLetter" v-show="mobileLifeBookLetter.length != 0">
						<!-- 标题 -->
						<div class="title">{{item.letter}}</div>
						<!-- 传记列表 -->
							<div v-for="items in item.list" class="data clearfix" @click="toDetails(items.qrCode)">
								<div class="img">
									<img :src="imgurl+items.headPortrait" alt="">					
								</div>
								<div class="right">
									<p class="name">{{items.name}}</p>
									<p class="introduce">{{items.introduction}}</p>
									<p class="number"><img src="../../images/phone-biographyList-se.png" alt="">{{items.browseNumber}}</p>
								</div>
							</div>
						
					</div>
					<!-- 缺省页面 -->
					<div class="notList" v-show="mobileLifeBookLetter.length == 0">
						<img src="../../images/phone-qx1.png" alt="">
						<p>陵园尚未开放该功能</p>
					</div>
				</div>
			</div>			
		</div>
		<!-- 右侧字母索引 -->
		<div class="LetterIndexes" v-show="(!isSearch && !searchResult) && mobileLifeBookLetter.length != 0">
			<div @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove" @touchend="onShortcutTouchEnd">
				<ul>
					<li :data-index="index+1" :class="currentNavIndex == index+1 ?'active':''" v-for="(item,index) in mobileLifeBookLetter" >{{item.letter}}</li>
				</ul>
			</div>						
		</div>
		<!-- 搜索层 -->
		<div class="searchPop" v-show="isSearch && !searchResult">
			<div class="top">
				<div class="div">
					<img src="../../images/phone-list-icon.png" alt="" class="icon">
					<form method="post" action="javaScript:void(0)">
						<Input style="width: 8.0rem;" v-model="inputValue" type="text" @on-enter="searchFun(inputValue)" placeholder="搜索"  ref="searchInput"></Input>
					</form>
					<img src="../../images/phone-list-icon2.png" alt="" @click="clearInput" class="icon2">
				</div>
				<span class="cancel" @click="cancelSearch">取消</span>
			</div>
			<p class="p1">类型筛选</p>
			<ul class="typeList clearfix">
				<li v-for="item in typeList" @click="chooseType(item.code,item.value)">{{item.value}}</li>
			</ul>
		</div>
		<!-- 搜索结果 -->
		<div class="searchPop" v-show="!isSearch && searchResult">
			<div class="top">
				<div class="div">
					<img src="../../images/phone-list-icon.png" alt="" class="icon">
					<div class="divInput" @click="isSearch=true;searchResult=false;">{{inputValue}}</div>
					<img src="../../images/phone-list-icon2.png" alt="" @click="cancelResult" class="icon2">
				</div>
				<span class="cancel" @click="cancelSearch">取消</span>
			</div>
			<!-- 列表内容 -->
			<div class="list list2">
				<div class="divWrap" ref="searchListWrap">
					<div>
						<div v-for="item in searchList" class="dataS clearfix" v-show="searchList.length != 0" @click="toDetails(item.qrCode)">
							<div class="img">
								<img :src="imgurl+item.headPortrait" alt="">					
							</div>
							<div class="right">
								<p class="name">{{item.name}}</p>
								<p class="introduce">{{item.introduction}}</p>
								<p class="number"><img src="../../images/phone-biographyList-se.png" alt="">{{item.browseNumber}}</p>
							</div>
						</div>
						<!-- 缺省页面 -->
						<div class="notList" v-show="searchList.length == 0">
							<img src="../../images/phone-qx2.png" alt="">
							<p>没有搜索到您要的相关传记信息</p>
						</div>
					</div>
				</div>
			</div>					
		</div>		
		<!-- 字母提示 -->
		<div class="letterShow" v-show="letterShowFlg">
			<div v-for="(item,index) in mobileLifeBookLetter" v-if="currentNavIndex == index+1">
				{{item.letter}}
			</div>
		</div>
	</div>
</template>
<script>
   	import global from '../../config/global'
    import { mapState } from 'vuex'
    import '../../js/flexible.debug.js'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import BScroll from "better-scroll"
	const ANCHOR_HEIGHT = window.innerHeight <= 480 ? 17 : 18
    export default {
		data(){
			return{
                hosturl:global.host,
				imgurl:global.imgurl,
				publicityShowPicSourceCutList:[],
				mobileLifeBookLetter:[],
				searchList:[],//搜索结果
				inputValue:"",
				isSearch:false,//搜索弹窗
				searchResult:false,//搜索结果弹窗
				typeList:[],//类型列表
				searchList:[],//搜索之后传记列表
                swiperOption:{
                    slidesPerView:1,
                    slidesPerColumn: 1,
					autoplay:2000,
					loop : true,
					autoplayDisableOnInteraction:false,
                    pagination :'.swiper-pagination',                   
				},
				cacluateHeight:[],
				currentNavIndex:1,
				letterShowFlg:false,
			}
		},
		created() {
			this.listHeight = [];
      		this.touch = {};
			this.init();

		},
		components: {
            swiper, swiperSlide
        },
        computed: mapState({ user: state => state.user }),
		watch:{
		},
		mounted(){		
			var this_ = this;
			setTimeout(() => {
				this_.inits();				
				this_._cacluateHeight()
				for(var i=0;i<document.querySelectorAll(".data").length;i++){
                    document.querySelectorAll(".data")[i].addEventListener('touchstart',function(){
						this.style.backgroundColor = "#F7F7F7";						
					},false);
					document.querySelectorAll(".data")[i].addEventListener('touchend',function(){
						this.style.backgroundColor = "#fff";						
					},false);
                };  

			}, 500)
		},
		methods:{
			init(){//查询基础列表和数据列表
                this.$http.get(this.hosturl+"/unsecured/mobile/lifebook?qrCode="+this.$route.query.qrCode)
				.then((response) => {
					if(response.body.status = 1){
						this.publicityShowPicSourceCutList = response.body.publicityShowPicSourceCutList;//轮播展示图
						this.mobileLifeBookLetter = response.body.mobileLifeBookLetter;//传记列表						
					}else{
						//接口出问题跳转异常页面
						this.$router.push({ path: '/interfaceException'});
					}
				});
				this.$http.get(this.hosturl+"/common/master/data/query?masterDataType=16")
				.then((response) => {
					if(response.body.status = 1){
						this.typeList = response.body.result;//
					}
				});
			},
			toSearch(){
				this.isSearch = true;
				this.searchResult=false;
			},
			clearInput(){//清空输入框
				this.inputValue = "";
			},
			cancelSearch(){//取消搜索结果遮罩
				this.inputValue = "";
				this.isSearch = false;
				this.searchResult=false;
			},
			cancelResult(){//取消搜索结果
				this.inputValue = "";
				this.isSearch = true;
				this.searchResult=false;
			},
			searchFun(value){//搜索传记
				if(!value){
					return;
				}
				this.$http.get(this.hosturl+"/unsecured/mobile/lifebook?qrCode="+this.$route.query.qrCode+"&searchKeyWord="+value)
				.then((response) => {
					if(response.body.status = 1){
						document.activeElement.blur();
						this.isSearch = false;
						this.searchResult=true;
						this.searchList = response.body.mobileLifeBookNotLetter;
						this.searchListNew = new BScroll(this.$refs.searchListWrap, {
							click: true,
							probeType : 3,
						});
						setTimeout(() => {
							for(var i=0;i<document.querySelectorAll(".dataS").length;i++){
			                    document.querySelectorAll(".dataS")[i].addEventListener('touchstart',function(){
									this.style.backgroundColor = "#F7F7F7";						
								},false);
								document.querySelectorAll(".dataS")[i].addEventListener('touchend',function(){
									this.style.backgroundColor = "#fff";						
								},false);
			                };
						}, 500);
						
					}
				})
			},
			chooseType(code,value){//点击分类
				this.$http.get(this.hosturl+"/unsecured/mobile/lifebook?qrCode="+this.$route.query.qrCode+"&lifebookCategory="+code)
				.then((response) => {
					if(response.body.status = 1){
						document.activeElement.blur();
						this.isSearch = false;
						this.searchResult=true;
						this.searchList = response.body.mobileLifeBookNotLetter;
						this.inputValue = value;
						this.searchListNew = new BScroll(this.$refs.searchListWrap, {
							click: true,
							probeType : 3,
						});
						setTimeout(() => {
							for(var i=0;i<document.querySelectorAll(".dataS").length;i++){
			                    document.querySelectorAll(".dataS")[i].addEventListener('touchstart',function(){
									this.style.backgroundColor = "#F7F7F7";						
								},false);
								document.querySelectorAll(".dataS")[i].addEventListener('touchend',function(){
									this.style.backgroundColor = "#fff";						
								},false);
			                };
						}, 500);
					}
				})
			},
			/* 右侧导航点击事件 */
			inits() {
				var initDom = this.$refs.listWrapper; 
				this.list = new BScroll(initDom, {
					click: true,
					probeType : 3,
				});

				this.list.on("scroll", (po) => {
					this.poyHeight = parseInt(Math.abs(po.y));		
					this._navScroll(parseInt(Math.abs(po.y)));
				})
			},
			_cacluateHeight() {//页面渲染完计算列表dom的高度存储起来
				var  cacluateChild = this.$refs.listRefs.children,
				height = -10;
				this.cacluateHeight.push(height);
				for (var i = 1; i < cacluateChild.length; i++) {
					height += cacluateChild[i].clientHeight;
					this.cacluateHeight.push(height);
				};
			},
			_navScroll(y) {//滑动列表div计算滑动距离															
				var heightArr = this.cacluateHeight,
					poy = y;
				for (var i = 0; i < heightArr.length; i++) {
					if (heightArr[i] < poy && heightArr[i+1] >= poy) {												
						this.currentNavIndex = i;
						return;
					};
				};  
			},
			_navClick(index) {//点击右侧字母定位
				var cacluateChild = this.$refs.listRefs.children;
				this.list.scrollToElement(cacluateChild[index]);
				if(index > cacluateChild.length-1){//拖动到最后一个字母下面
					index = cacluateChild.length-1;
				}else if(index < 0 ){//拖动到第一个字母上面
					index  = 1;
				}
				this.currentNavIndex = index;
			},
			onShortcutTouchStart(e) {		
				this.letterShowFlg = true;
				this.clickIndex = parseInt(e.target.getAttribute('data-index'));		
				this._navClick(this.clickIndex);
				this.touch.y1 = e.touches[0].pageY;
				var parentHeight = e.target.parentNode.clientHeight;		
				this.liHeight = parentHeight/(this.$refs.listRefs.children.length - 1);
			},
			onShortcutTouchMove(e) {
				this.touch.y2 = e.touches[0].pageY	
				var scrollHeight = 	this.touch.y2 - this.touch.y1
				if(scrollHeight > 0){
					var a = Math.floor(Math.abs(scrollHeight)/this.liHeight);					
					var c = this.clickIndex + a;
					this._navClick(c)
				}else{
					var a = Math.floor(Math.abs(scrollHeight)/this.liHeight);					
					var c = this.clickIndex - a;
					this._navClick(c)
				}		
			},
			onShortcutTouchEnd(){
				setTimeout(() => {
					this.letterShowFlg = false;
				}, 1000);
			},
			toDetails(qrCode){
				console.log(qrCode);
				this.$router.push({ path: '/cmt',query:{"hid":qrCode}});
			},



			
		}
    }
</script>
